<template>
	<!-- 收货 -->
	<view class="container">
		<!-- <view class="statusBox"> -->
		<view class="flexBox">
			<view :class="tabIndex == item.value?'statusItem active':'statusItem'" v-for="item in statusList"
				:key="item.title" @click="tabbarChange(item.value,item.title)">
				{{item.title}}
			</view>
		</view>
		<uni-search-bar style="background-color: #fff;" @confirm="search" v-model="keyword" @cancel="cancel"
			placeholder="请输入商铺名称" @clear="cancel"></uni-search-bar>
		<view class="" style="background-color: #fff;padding-bottom: 20rpx;padding-top: 20rpx;">
			<view class="customer" style="margin: 0 20rpx;display: flex;align-items: center;">
				<uni-datetime-picker @change="changeDate" :clear-icon="false" v-model="range" type="daterange" />
				<view v-if="range.length!==0" @click="timeDeletChange" class=""
					style="background-color: #fff;border-radius: 50%;padding: 5rpx 13rpx;margin-left: 20rpx;">
					<uni-icons type="closeempty" size="15"></uni-icons>
				</view>
			</view>
			<!-- 	<view class=""
				style="color: #0482D4;font-weight: bold;text-align: right;padding-top:20rpx;padding-right:30rpx">
				{{tabType}}赊账总计: ￥{{ momenyFormat(MoneyTotal) }}
			</view> -->
		</view>
		<!-- </view> -->

		<view class="content">
			<scroll-view class="scroll" style="width: 100%;" scroll-y="true" :show-scrollbar="false"
				@scrolltolower="lower">
				<view class="merchant" v-for="item,index in receiptListData" :key="item.Id" @click="toInfoPage(item)">
					<!-- 暂时注释 后续需要打开 -->
					<view>
						<image class="imageLeft" :src="item.Logo||'/static/logo.png'" mode=""></image>
						<text class="textOverflow textWidth"> {{item.CompanyName}}</text>
						<view class="imageBox" v-if="item.Status>=0">
							<image v-if="item.Status==0" src="/static/home/daishoushuo.png" mode=""></image>
							<image v-if="item.Status==1" src="/static/home/yishouhuo.png" mode=""></image>
							<image v-if="item.Status==2" src="/static/home/judan.png" mode=""></image>
							<image v-if="item.Status==3" src="/static/home/chayi.png" mode=""></image>
						</view>
						<view class="imageBox" v-else>
							<image v-if="item.IsConfirm==0" src="/static/home/queren.png" mode=""></image>
							<image v-if="item.IsConfirm==2" src="/static/home/judan.png" mode=""></image>
						</view>
					</view>
					<view class="">
						单号：{{getReplaceId("B"+item.BillId)}}
					</view>
					<view class="flexBox">
						<view class="">
							日期：{{item.CreateTime?item.CreateTime.substring(0,10):''}}
						</view>
						<view class="">
							金额：￥{{momenyFormat(item.CreditAmount||item.TotalSum)}}
						</view>
					</view>
					<view class="">
						账期：{{item.Period}} 天 ({{item.AccountingStartTime?item.AccountingStartTime.substring(0,10):''}} ~
						{{item.AccountingEndTime?item.AccountingEndTime.substring(0,10):''}})
					</view>
					<view v-if="item.State==0 && item.IsClick==false" class="noRead">
						<view> </view>
					</view>
				</view>
				<!-- 上拉显示更多 -->
				<view class="" style="padding-bottom: 100rpx;">
					<uniLoadMore :status="Status" :contentText="contentText" :rows="receiptListData"></uniLoadMore>
				</view>
			</scroll-view>
		</view>

	</view>
</template>

<script>
	// 引入加载更多
	import uniLoadMore from '@/components/uni-load-more.vue'
	import {
		momenyFormat
	} from '../../utils/utils.js'
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				// 顶部默认tab
				tabIndex: "0",
				// 总计
				MoneyTotal: 0,
				// 加载状态
				Status: "loading",
				contentText: {
					contentdown: '',
					contentrefresh: '加载中',
					contentnomore: '没有更多了'
				},
				range: [],

				keyword: '',
				// tab点击类型
				tabType: "待收货",
				statusList: [{
					value: '0',
					title: '待收货'
				}, {
					value: '1',
					title: '已收货'
				}, ],
				pagination: {
					PageIndex: 1,
					PageRows: 10,
				},
				Total: 0,
				// 收货列表数据
				receiptListData: [],
				userInfo: {},
				// 公司信息
				CompanyInfo: {},
				momenyFormat,
				StartDate: "",
				EndDate: "",
				getUrl: '/BO/ApplicationForm/GetBuyerOrderList',
				flag: true,
				// 是否认证
				isFlag: false,
				// 是否是从签收完成的complet页面返回来的
				isComplet: false,
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo')
			this.CompanyInfo = uni.getStorageSync('CompanyInfo')
			// this.status = uni.getStorageSync('tabKey') || '0-0'
			// if (this.status.indexOf('-') > -1) this.getUrl = '/BO/ApplicationForm/GetBuyerOrderList'
			// else this.getUrl = '/BO/ApplicationForm/GetBillingData'
		},
		onShow() {
			this.keyword = "";
			this.range = []
			this.StartDate = ""
			this.EndDate = ""
			console.log(uni.getStorageSync('ReceiptKeyword'))
			let storage = uni.getStorageSync('ReceiptKeyword')
			console.log(uni.getStorageSync('ReceiptKeyword'))
			if (storage) {
				this.keyword = storage.Keyword || "";
				this.StartDate = storage.StartDate || "";
				this.EndDate = storage.EndDate || "";
				this.range = [this.StartDate, this.EndDate]
			}
			this.receiptListData = []
			this.pagination.PageIndex = 1
			console.log('获取之前是否改变', this.isComplet, this.tabIndex, this.status, this.tabType)
			if (uni.getStorageSync('tabIndex') == 1) {
				this.tabType = '已收货'
				this.tabIndex = "1"
			} else {
				this.tabType = '待收货'
				this.tabIndex = "0"
			}
			console.log('获取是否更换过来了', this.isComplet, this.tabIndex, this.status, this.tabType)

			this.userInfo = uni.getStorageSync('userInfo')
			this.CompanyInfo = uni.getStorageSync('CompanyInfo')
			// 设置小红点
			// this.$store.commit('setTabBarBadge',"99")
			this.receiptListData = []
			// 获取收货列表数据 
			this.getDataList()
			// 判断是否认证
			this.AuthRealName()


		},
		onHide() {
			console.log('卸载页面了1', )
			uni.removeStorageSync('tabIndex')
		},
		// 下拉刷新
		onPullDownRefresh() {
			// 重置相关参数
			// 加载
			this.Status = "loading"
			this.receiptListData = []
			this.pagination.PageIndex = 1
			// 重新获取查询数据
			this.getDataList()
			uni.stopPullDownRefresh(); //停止刷新
		},
		// // 上拉加载更多
		// onReachBottom() {
		// 	if (this.pagination.PageRows * this.pagination.PageIndex >= this.Total) {
		// 		// 暂停加载  没有更多了
		// 		this.status = "noMore"
		// 		return 
		// 	}
		// 	this.getDataList()
		// },
		onNavigationBarButtonTap(e) {},
		methods: {
			// 验证是否实名认证
			AuthRealName() {
				this.isFlag = false
				uni.request({
					url: this.$veriUrl + '/auth/VeriRecord/state?Value=' + this.userInfo.UserPhone,
					method: 'GET'
				}).then(result => {
					let [err, res] = result;
					if (res.data.code == 200) {
						// 说明已认证
						this.isFlag = true
						// 相关字段插入用户信息  从新缓存 
						this.$set(this.userInfo, 'fromDevice', res.data.data.fromDevice)
						this.$set(this.userInfo, 'id', res.data.data.id)
						this.$set(this.userInfo, 'createTime', res.data.data.createTime)
						this.$set(this.userInfo, 'IdCard', res.data.data.idNumber)
						this.$set(this.userInfo, 'RealName', res.data.data.name)
						this.$set(this.userInfo, 'UserName', res.data.data.name)
						this.$set(this.userInfo, 'OpenId', res.data.data.openId)
						this.$set(this.userInfo, 'UserPhone', res.data.data.phone)
						this.$set(this.userInfo, 'remark', res.data.data.remark)
						this.$set(this.userInfo, 'Sign', res.data.data.sign)
						this.$set(this.userInfo, 'state', res.data.data.state)
						this.$set(this.userInfo, 'veriType', res.data.data.veriType)
						if (this.userInfo.RealName) this.getBG(this.userInfo.RealName)
						else uni.removeStorageSync('nameBG')
					} else {
						// 说明未认证
						this.isFlag = false
					}
					uni.removeStorageSync('userInfo')
					// 重新缓存用户信息
					uni.setStorageSync('userInfo', this.userInfo)
					// 存储缓存是否认证
					uni.removeStorageSync('flag', this.isFlag)
					uni.setStorageSync('flag', this.isFlag)
				})
				return this.isFlag
			},
			getBG(name) {
				this.$http('post', '/Base_Manage/Upload/GetNameSign?Name=' + name).then(res => {
					if (res.Success) uni.setStorageSync('nameBG', res.Data)
				})
			},
			// 字符串空格处理
			getReplaceId(data) {
				if (data) {
					return data.replace(/\s/g, '').replace(/(.{4})/g, "$1 ")
				}
			},
			// 触底
			lower(e) {
				if (this.receiptListData.length >= this.Total) {
					this.Status = "noMore"
					return
				}
				this.getDataList()
			},

			// 搜索
			search() {
				this.pagination.PageIndex = 1
				this.receiptListData = []
				this.getDataList()
			},
			// 搜索清空
			cancel() {
				this.keyword = ""
				this.StartDate = ""
				this.EndDate = ""
				this.pagination.PageIndex = 1
				this.receiptListData = []
				this.getDataList()
			},
			// 时间选择
			// 时间选择
			changeDate(e) {
				this.StartDate = e[0]
				this.EndDate = e[1]
				this.pagination.PageIndex = 1
				this.receiptListData = []
				this.getDataList()
			},
			// 时间清空
			timeDeletChange() {
				this.range = []
				this.StartDate = ""
				this.EndDate = ""
				this.pagination.PageIndex = 1
				this.receiptListData = []
				this.getDataList()
			},
			// 导航栏切换
			tabbarChange(e, type) {
				this.tabType = type
				console.log('切换了', this.tabType)
				// uni.setStorageSync('tabKey', e)
				this.tabIndex = e
				this.receiptListData = []
				this.pagination.PageIndex = 1
				this.keyword = ''
				// 获取收货列表数据
				this.getDataList(e)
			},
			AgreementPage(item) {
				uni.setStorageSync('shopInfo', item)
				uni.navigateTo({
					url: '/pages/AgreementPage/AgreementPage'
				})
			},
			// 列表点击
			toInfoPage(item) {
				uni.setStorageSync('Id', item.Id)
				// 验证是否实名认证
				this.flag = false
				// uni.request({
				// 	url: this.$veriUrl + '/auth/VeriRecord/state?Value=' + this.userInfo.UserPhone,
				// 	method: 'GET'
				// }).then(result => {
				// 	console.log('是否认证', result)
				// 	let [err, res] = result;
				// 	if (res.data.code == 200) {
				// 		console.log(res.data.data);
				// 		this.flag = false
				// 		this.img = res.data.data.veriType
				// 		this.userInfo = {
				// 			...res.data.data,
				// 			name: res.data.data.name || this.userInfo.UserName,
				// 			phone: res.data.data.phone || this.userInfo.UserPhone,
				// 			idCard: res.data.data.idNumber || this.userInfo.idCard,
				// 			avatarUrl: res.data.data.avatarUrl || this.userInfo.UserAvatarURL,
				// 			smscode: res.data.data.smscode || this.userInfo.SmsCode,
				// 		}
				// 		if (this.userInfo.UserName) this.getBG(this.userInfo.UserName)
				// 		else uni.removeStorageSync('nameBG')
				// 	} else {
				// 		this.flag = true
				// 	}
				// 	uni.setStorageSync('userInfo', this.userInfo)
				// })
				if (this.tabIndex == 0) {
					uni.navigateTo({
						url: '/pages/Sign/Sign?Id=' + item.Id + "&Company=" + item.Company + '&SignType=' + item
							.SignType
					})
				} else {
					uni.navigateTo({
						url: '/pages/webView/receiptWebview?phone=' + this.userInfo.UserPhone + '&id=' + item.Id
					})

				}

				// if (item.State == 0 && !item.IsClick) {

				// 	this.$http('post', '/BO/ApplicationForm/UpClick?id=' + item.Id).then(res => {
				// 		if (res.Success) {}
				// 	})
				// 	this.$http('post', '/BO/ApplicationForm/ReadMessage?keword=' + this.userInfo.Id).then(res => {
				// 		if (res.Success) {
				// 			// 如果数量为0  说明没有订单  不需要显示有角标 
				// 			if (res.Data == 0) {
				// 				// 移除底部menu小红点
				// 				uni.removeTabBarBadge({
				// 					index: 1
				// 				});
				// 			} else {
				// 				uni.setTabBarBadge({
				// 					index: 1,
				// 					text: res.Data
				// 				})
				// 			}
				// 		}
				// 	})
				// }
				// if (item.State >= 0) uni.navigateTo({
				// 	url: '/pages/Order/OrderInfo?Id=' + item.Id + '&State=' + item.State
				// })
				// else uni.navigateTo({
				// 	url: '/pages/Order/OrderInfoDetail?Id=' + item.Id
				// })
			},
			getBG(name) {
				this.$http('post', '/Base_Manage/Upload/GetNameSign?Name=' + name).then(res => {
					if (res.Success) uni.setStorageSync('nameBG', res.Data)
				})
			},
			// 获取收货列表数据
			getDataList(state) {
				if (this.keyword || (this.StartDate && this.EndDate)) {
					uni.setStorage({
						key: 'ReceiptKeyword',
						data: {
							Keyword: this.keyword,
							StartDate: this.StartDate,
							EndDate: this.EndDate,
						}
					})
				} else {
					uni.removeStorageSync('ReceiptKeyword')
				}
				this.Status = "loading"
				let UserPhone = uni.getStorageSync('userInfo').UserPhone
				let CompanyInfoId = uni.getStorageSync('CompanyInfo').Id
				let obj = {
					...this.pagination,
					"SortField": "CreateTime",
					"SortType": "desc",
					"Search": {
						// 店铺id
						"SupplieId": this.CompanyInfo.Id ? this.CompanyInfo.Id : CompanyInfoId,
						// 买家手机号
						"CustomerPhone": this.userInfo.UserPhone ? this.userInfo.UserPhone : UserPhone,
						"Status": this.tabIndex,
						"Keyword": this.keyword,
						"StartDate": this.StartDate,
						"EndDate": this.EndDate
					}
				}
				this.$http('post', '/BO/BillList/GetBuyerBillList', obj).then(res => {
					if (res.Success) {
						// 赋值总条数
						this.Total = res.Total
						if (res.Data.length == 0) {
							this.Status = "noMore"
							this.MoneyTotal = res.MoneyTotal
							return
						}
						let obj = ['待签收', '已签收', '拒签收', '差异', '作废']
						res.Data.forEach(item => {
							item.readState = obj[item.Status];
						})
						if (this.pagination.PageIndex == 1) {
							this.receiptListData = res.Data
							this.pagination.PageIndex += 1
						} else {
							this.receiptListData = this.receiptListData.concat(res.Data)
							this.pagination.PageIndex += 1
						}
						this.MoneyTotal = res.MoneyTotal
						uni.stopPullDownRefresh(); //停止刷新
						if (this.pagination.PageRows * this.pagination.PageIndex >= this.Total) {
							// 暂停加载  没有更多了
							this.Status = "noMore"
							return
						}

					} else {
						// 停止加载状态
						this.Status = "noMore"
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	// page{
	// 	background-image: url(/static/background.png);
	// }
	::v-deep.uni-searchbar {
		background-color: #fff;
	}

	.noRead {
		display: flex;
		justify-content: flex-end;

		view {
			width: 20rpx;
			height: 20rpx;
			background-color: red;
			border-radius: 30rpx;
		}
	}

	.container {
		height: 100%;
		background-image: url('/static/home/background.png');
		background-size: contain;
		background-repeat: no-repeat;
		// padding-top: 40px;
		box-sizing: border-box;

		.content {

			font-size: 13px;

			.scroll {
				// 兼容H5和APP
				/* #ifdef H5 */
				height: calc(100vh - 260px);
				/* #endif */
				/* #ifdef APP */
				height: calc(100vh - 155px);
				/* #endif */
				/* #ifdef MP-WEIXIN */
				height: calc(100vh - 180px);
				/* #endif */
			}
		}

		.flexBox {
			view {
				flex: 1;
			}
		}

		.statusBox {
			box-sizing: border-box;
			margin: 0 10px;
			border-radius: 10px;
			overflow: hidden;
			box-shadow: 1px 1px 5px #ccc;
		}

		.statusItem {
			text-align: center;
			// border: 1px solid #dedeed;
			box-sizing: border-box;
			padding: 5px;
			background-color: #fff;
			color: #888;

			&:active {
				background-color: #2979ff;
				color: #fff;
				font-weight: 600;
			}
		}

		.active {
			background-color: #2979ff;
			color: #fff;
			font-weight: 600;
		}

		.merchant {
			background-color: #fff;
			border-radius: 10px;
			box-shadow: 1px 1px 5px #ccc;
			box-sizing: border-box;
			padding: 20rpx;
			padding-top: 10px;
			margin: 10px;
			position: relative;
			overflow: hidden;

			.imageLeft {
				width: 25px;
				height: 25px;
				vertical-align: bottom;
				margin-right: 6px;
				border-radius: 5px;
			}

			.imageBox {
				image {
					position: absolute;
					right: 0;
					top: 0;
					width: 40px;
					height: 40px;
				}
			}
		}


	}
</style>